
const path = require("path");
const Htmlwebpackplugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

// process.env.NODE_ENV="development";

module.exports = {
  entry: path.join(__dirname, "src/main.js"),
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // "style-loader",
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: () => [require("postcss-preset-env")()]
            }
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          // "style-loader",
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: () => [require("postcss-preset-env")()]
            }
          },
          "less-loader"
        ]
      },
      {
        test: /\.(html|htm)$/,
        use: ["html-loader"]
      },
      {
        test: /\.(png|jpg|svg|webp|jpeg)$/,
        use: {
          loader: "url-loader",
          options: {
            esModule: false,
            limit: 50 * 1024,
            name: "[hash:10].[ext]"
          }
        }
      },
      {
        test: /\.js/,
        exclude: /node_modules/,
        use: [
          {
            loader: "eslint-loader",
            options: {
              fix: true
            }
          },
          {
            loader: "babel-loader",
            options: {
              presets: [
                [
                  "@babel/preset-env",
                  {
                    useBuiltIns: "usage",
                    corejs: {
                      version: 3
                    },
                    targets: {
                      chrome: "60",
                      firefox: "50",
                      ie: "9",
                      safari: "10",
                      edge: "17"
                    }
                  }
                ]
              ]
            }
          }
        ]
      },
      {
        exclude: /\.(html|js|png|jpg|css|less|gif)/,
        loader: "file-loader",
        options: {
          name: "[hash:10].[ext]"
        }
      }
    ]
  },
  mode: "development",
  devServer: {
    contentBase: path.resolve(__dirname, "dist"),
    compress: true,
    open: true,
    port: 3000
  },
  plugins: [
    // new Htmlwebpackplugin({
    //   title: "My Webpack App",
    //   filename: "index.html",
    //   template: "./src/index.html"
    // }),
    new MiniCssExtractPlugin({
      filename: "css/main.css"
    }),
    new OptimizeCssAssetsWebpackPlugin()
  ]
};